<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>轩辕短信平台</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="description" content="Place your description here" />
		<meta name="keywords" content="put, your, keyword, here" />
		<meta name="author"
			content="cssMoban.com - website templates provider" />
		<link href="style.css" rel="stylesheet" type="text/css" />
		<link href="css/validator.css" rel="stylesheet" type="text/css" />
		<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet"
			type="text/css" />
		<link href="./css/paging.css" rel="stylesheet" type="text/css" />
		<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
		<script src="js/jcarousellite.js" type="text/javascript"></script>
		<script type="text/javascript">

	$(document).ready(function(){
	  $("a.new_window").attr("target", "_blank");
	  
	  executeQuery(userAction.listUser,[userLists]);
         
         function userLists(data){
             var page = data.pageInfo;
             var data = data.userVos;
              if(!page){
             alert("出错了！请重试...");
              }
         initPage(page.totalPage, page.pageIndex, page.pageSize, page.totalRec);  
          $("#resultTable tr").remove();
                   var trs = ""
                   var index = 0;
              for(var i = 0; i < data.length; i++){
                   index++;
                   var user = data[i];
                   var userId = user.id;
                   var department = user.department;
                   var email = user.email;
                   var name = user.name;
                   var password = user.password;
                   var per = user.per;
                   var phone = user.phone;
                   var userName = user.userName;
                   var tr = '<tr id="tr'+userId+'" heigh="5">'
                          + '<th class="alt"><b>'
                          + index 
                          + '</b></th><td scope="row" abbr="Frontside bus" class="spec"><b>'
                          + userName
                          + '</b></td><td class="alt"><b>'
                          + email
                          + '</b></td><td scope="row" abbr="Frontside bus" class="spec"><b>'
                          + phone
                          + '</b></td><td class="alt"><b>'
                          + department
                          + '</b></td><td>'
                          + '<a href="loadUserByIdAction.action?userId='+userId+'">更新</a>|<a href="javascript:delUser('+userId+')">删除</a>'
                          + '</td></tr>';
                          trs = trs + tr;
              }
              var tr1 = '<tr bgcolor="blue"><th heigh="10">'
					   +'</th><td align="center">用户名'
					   +'</td><td align="center">邮件'
					   +'</td><td align="center">手机'
					   +'</td><td align="center">所在部门'
					   +'</td><td align="center">编辑'
					   +'</td></tr>';
              var trss = tr1 + trs
                  $("#resultTable").append(trss);
         }
	});
	
	function edit(userId){
	   userAction.loadUserVo(evalDwrData(userId),function(data){
	        var userName = data.userName;
	        var name = data.name;
	        var department = data.department;
	        var phone = data.phone;
	        var email = data.email;
	        $('#username').attr('value',userName);
	        $('#realname').attr('value',name);
	        $('#department').attr('value',department);
	        $('#mobile').attr('value',phone);
	        
	        $('#editUser').dialog({
	        modal : true,
			show : "blind",
			hide : "blind",
			width : 600,
			height : 400,
				buttons : {
			"修改" : function() {
			    var username = $('#username').val();
			    var realname   = $('#realname').val();
			    var department  = $('#department').val();
			    var mobile     = $('#mobile').val();
                var email      = $('#email').val();
			   userAction.updateUser(userId, username, realname, department, mobile, email);
			            alert("修改成功..");
				$(this).dialog("close");  
			   },
			"关闭" : function() {
					$(this).dialog("close");
				}
			
		}
	        });
	   });
	}
	
	function delUser(userId){
	    userAction.delUser(evalDwrData(userId),function(data){
	        var tag = "#tr"+ userId;
	        //$(tag).hide("fast");
	        $(tag).fadeOut("slow"); 
	    });
	}
	
	function evalDwrData(data) {
	if (!data) {
		return null;
	}
	if (data == "") {
		return null;
	}
	return eval(data);
}
		
</script>
<style type="text/css"> 
/* CSS Document */  

a { 
    color: #c75f3e; 
} 

#content .aside {float:left;width:258px;}

#mytable { 
    font: bold 20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    width: 700px; 
    padding: 0; 
    margin: 0; 
} 
 

th { 
    
    color: #4f6b72; 
    border: 1px solid #C1DAD7; 
    letter-spacing: 2px; 
   
    text-align: left; 
    padding: 6px 6px 6px 12px; 
    background: #CAE8EA no-repeat; 
} 

th.nobg { 
     border: 1px solid #C1DAD7;
    border-right: 1px solid #C1DAD7; 
    background: none; 
} 

td { 
    border-top: 1px solid #C1DAD7; 
    border-right: 1px solid #C1DAD7; 
    border-bottom: 1px solid #C1DAD7; 
    background: #fff; 
    font-size:12px; 
    padding: 4px 4px 4px 8px; 
    color: #4f6b72; 
} 


td.alt { 
    background: #F5FAFA; 
    color: #797268; 
} 

th.spec { 
    border: 1px solid #C1DAD7; 
    background: #fff url(images/bullet1.gif) no-repeat; 
    font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
} 

</style>
		<!--[if lt IE 7]>
<script type="text/javascript" src="js/ie_png.js"></script>
<script type="text/javascript">
	ie_png.fix('.png, .carousel-box .next img, .carousel-box .prev img');
</script>
<link href="ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
	</head>
	<body id="page5">
		<div class="tail-top-left"></div>
		<div class="tail-top">
			<!-- header -->
			<div id="header">
				<div class="row-1">
					<div class="fleft">
						<a href="index.html"><img src="images/logo.gif" alt="" /> </a>
					</div>
					<div class="fright">
						<ul>
							<li><a href="indexAction" ><b>主页</b></a></li>
					<li><a href="seeUserAction" class="active"><b>用户管理</b></a></li>
					<li><a href="sendMessageAction"><b>短信平台</b></a></li>
					<li><a href="updateByPersonAction"><b>个人信息管理</b></a></li>
					<li><a href="aboutUsAction"><b>关于我们</b></a></li>
						</ul>
					</div>
				</div>
				<div class="row-2">
					<span><b><img src="images/slogan.gif" alt="" /> </b> <a
						href="#"><img src="images/button.gif" alt="" /> </a> </span>
				</div>
			</div>
			<!-- content -->
			<div id="content">
				<div class="inner_copy">
					More
					<a href="http://www.cssmoban.com/">Website Templates</a> at
					TemplateMonster.com!
				</div>
				<div class="row-1">
					<div class="inside">
						<div class="container">
							<div class="aside">
								<h3 style="font-size:28px;hine-height:1.2em;text-align:left;">
									功能
								</h3>
								<ul>
								    <li>
										<img src="images/pic1.gif" alt="" />
										<div class="extra-wrap">
											<span style="width: 80px"><a href="seeUserAction">用户列表</a> </span>
										</div>
									</li>
									<li>
										<img src="images/pic2.gif" alt="" />
										<div class="extra-wrap">
											<span style="width: 80px"><a href="selectUserAction">用户查询</a> </span>
										</div>
									</li>
									<li>
										<img src="images/pic3.gif" alt="" />
										<div class="extra-wrap">
											<span style="width: 80px"><a href="addUserAction">用户添加</a> </span>
										</div>
									</li>
									<li>
										<img src="images/pic4.gif" alt="" />
										<div class="extra-wrap">
											<span style="width: 80px"><a href="updateByPersonAction">用户修改</a> </span>
										</div>
									</li>
									<li>
										<img src="images/pic5.gif" alt="" />
										<div class="extra-wrap">
											<span style="width: 80px"><a href="updatePassAction">修改密码</a> </span>
										</div>
									</li>
								</ul>
								
							</div>
							<div class="content">
								<div>
								<br/>
									<div id="queryResult">
										<table width="568" id="resultTable" id="mytable" cellspacing="0">
											<tr>
												<th width="86" heigh="10">
													用户ID
												</th>
												<td width="65" heigh="10">
													用户名
												</td>
												<td width="124" heigh="10">
													email
												</td>
												<td width="96" heigh="10">
													phone
												</td>
												<td width="87" heigh="10">
													所在部门
												</td>
												<td width="70" heigh="10">
													编辑
												</td>
											</tr>

										</table>
									</div>
									<div id="allDataDiv">
										<!--上一页，下一页 开始-->
										<table width="100%" class="pagecss">
											<tr>
												<td align="left">
													<span id="AllPage">共几页/几条</span>
													<span id="setupNum">显示每页记录条数</span>
													<select id="setSize"
														onchange="ajaxChangeCount(this.options[this.options.selectedIndex].value)">
													</select>
												</td>
												<td align="right">
													<span id="Flexigrid_Bar"><a href="">上5页</a><span
														class="dan">1</span><a href="">2</a><a href="">3</a><a
														href="">下5页</a> </span>
													<span id="checkPage"><input type="text"
															style="width: 20px;" />&nbsp;页<a href="">GO</a> </span>
												</td>
											</tr>
										</table>
										<!--上一页，下一页 结束-->
									</div>


								</div>
							</div>
							<div class="clear"></div>
						</div>
					</div>
				</div>
				<div class="tail-middle">
					<div class="row-2">
						<div class="inside">
							<h3>
								Pages
							</h3>
							<div class="indent">
								<div class="box1">
									<div class="border-top">
										<div class="border-bot">
											<div class="left-top-corner">
												<div class="right-top-corner">
													<div class="right-bot-corner">
														<div class="left-bot-corner">
															<div class="inner">
																<ul class="site-map wrapper">
																	<li class="m1">
																		<a href="index.html"><b>Home Page</b> </a>
																		<ul>
																			<li>
																				<a href="#">Greeting Article</a>
																			</li>
																		</ul>
																	</li>
																	<li class="m2">
																		<a href="about-us.html"><b>About Us</b> </a>
																		<ul>
																			<li>
																				<a href="#">Team Member One</a>
																			</li>
																			<li>
																				<a href="#">Another Team Member</a>
																			</li>
																			<li>
																				<a href="#">Another Team Member</a>
																			</li>
																		</ul>
																	</li>
																	<li class="m3">
																		<a href="articles.html"><b>Our Articles</b> </a>
																		<ul>
																			<li>
																				<a href="#">Article 1 Title</a>
																			</li>
																			<li>
																				<a href="#">Article 2 Title</a>
																			</li>
																			<li>
																				<a href="#">Article 3 Title</a>
																			</li>
																		</ul>
																	</li>
																	<li class="m4">
																		<a href="contact-us.html"><b>Contact Us</b> </a>
																	</li>
																	<li class="last">
																		<a href="sitemap.html"><b>Site Map</b> </a>
																	</li>
																</ul>
															</div>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>



			<div id="editUser" style="display: none;" title="用户信息修改">
				<form id="validator-form">
					<fieldset class="field-wrap">
						<div class="field-item">
							<label for="username">
								用户名：
							</label>
							<input id="username" name="username" class="input-item"
								type="text" maxlength="20" />
						</div>

						<div class="field-item">
							<label for="username">
								真实姓名：
							</label>
							<input id="realname" name="realname" class="input-item"
								type="text" maxlength="20" />
						</div>

						<div class="field-item">
							<label for="department">
								所属部门：
							</label>
							<input id="department" name="department" class="input-item"
								type="text" maxlength="20" />
						</div>
						<div class="field-item">
							<label for="email">
								电子邮箱：
							</label>
							<input id="email" name="email" type="text" class="input-item" />
						</div>
						<div class="field-item">
							<label for="mobile">
								手机：
							</label>
							<input id="mobile" name="mobile" type="text" class="input-item"
								maxlength="11" />
						</div>
						<div class="field-item center">
							<input name="btnsubmit" id="btnsubmit" type="submit"
								value=" 确定提交 " onclick="updateUser()" />
						</div>
					</fieldset>
				</form>
			</div>








			<!-- footer -->
			<div id="footer">
				<div class="footer">
					Copyright - Type in your name here
					<br />
					<a href="http://www.cssmoban.com/" class="new_window">网站模板</a> from
					cssMoban.com
					<br />
					<a href="http://www.cssmoban.com/" class="new_window">cssMoban.com</a>
					provided by cssMoban.com
				</div>
			</div>
		</div>
		<script type='text/javascript' src='dwr/engine.js'></script>
		<script type='text/javascript' src='dwr/util.js'></script>
		<script type='text/javascript' src='dwr/interface/userAction.js'></script>
		<script type="text/javascript" src="js/pageInfo.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js" />
		<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
		<script src="js/jcarousellite.js" type="text/javascript"></script>
		<script type="text/javascript" src="js/yui.js"></script>
		<script type="text/javascript" src="js/yui.validator.js"></script>
		<script type="text/javascript">
    
     
     /*表单验证 */
(function(){	
	
		Validator = YUI.Validator, 
	Validator.setup({
		"form": "validator-form"
	}).add({
	    "target": "username",
		"rule": "username",
		"fn": function(){
			return true;
		}
	}).add({
		"target": "realname",
		"rule": "require"
	}).add({
		"target": "department",
		"rule": "require"
	}).add({
		"target": "email",
		"rule": "email"
	}).add({
		"target": "mobile",
		"rule": "mobile"
	});
})();	
 </script>
	</body>
</html>
